<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet/less" href="./css/common-1.less">
    <link rel="stylesheet/less" href="./css/index.less">
    <link rel="stylesheet/less" href="./css/about.less">
</head>

<body>
    <div id="bcground">

        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
                <a class="navbar-brand" href="./index.html"><img src="./picture/logo.png" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="./index.html" id="navbarDropdown" role="button"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Home
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="./index.html">Home Style 01</a>
                                    <a class="dropdown-item" href="./index.html">Home Style 02</a>
                                    <a class="dropdown-item" href="./index.html">Home Style 03</a>
                                    <a class="dropdown-item" href="./index.html">Home Style 04</a>
                                    <a class="dropdown-item" href="./index.html">Home Style 05</a>
                                    <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Header
                                        Styles</a>
                                    <div class="dropdown-menu menu-1" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="#">Home Style 01</a>
                                        <a class="dropdown-item" href="#">Home Style 02</a>
                                        <a class="dropdown-item" href="#">Home Style 03</a>
                                        <a class="dropdown-item" href="#">Home Style 04</a>
                                        <a class="dropdown-item" href="#">Home Style 05</a>
                                    </div>

                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #059f81 !important;">About</a>
                            </li>
                            <!-- <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Portfolio
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Portfolio Type 01</a>
                                    <a class="dropdown-item" href="#">Portfolio Type 02</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Portfolio Single</a>
                                </div>
                            </li> -->
                            <li class="nav-item">
                                <a class="nav-link" href="./page.html">Pages</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Blog
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="./blog.html">Blog Gird</a>
                                    <a class="dropdown-item" href="#">Blog Classic</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Blog Single</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./contact.html">Contact</a>
                            </li>
                            <li class="nav-item logo"><a href="#"><img src="./logo/搜索.png" alt=""></a></li>
                            <li class="nav-item logo"><a href="#"><img src="./logo/分享.png" alt=""></a></li>
                        </ul>



                    </div>

                </div>
            </nav>
        </header>
        <!-- 主页 -->
        <div class="main wow bounceInUp">
            <div class="item wow bounceInUp">
                <h1>about me</h1>
            </div>
            <div class="item-1 " style="color: green;"> <a href="#" style="color: white;">home </a>- about me</div>
        </div>

    </div>

    <!-- 内容 -->
    <div class="item2">
        <h1>I'M MARI JONS, A PROFESSIONAL PHOTOGRAPHER.
            MY PASSION IS TAKING PHOTOS OF THE MOST STUNNING
            ARCHITECTURE AROUND THE WORLD.</h1>
        <div class="row">
            <div class="left wow bounceIn " data-wow-delay=".5s" data-wow-iteration:"1"><img src="./picture/about-1.jpg" alt=""></div>
            <div class="right">
                <p class="wow slideInRight data-wow-iteration:"1"" data-wow-delay=".5s">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and
                    demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee
                    the pain and trouble that are bound to ensue; and equal</p>
                <p class="wow slideInRight data-wow-iteration:"1"" data-wow-delay=".5s">which is the same as saying through shrinking from toil and pain. These cases are perfectly simple
                    and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing
                    prevents our being able to do what we like best, every pleasure is to be welcomed and every pain
                    avoided. But in certain circumstances and owing to the claims of duty or the obligations of business
                    it will</p>
                <div class="box wow bounceIn" data-wow-iteration:"1">
                    <figure><img src="./picture/signature.png" alt=""></figure>
                    <div class="line"></div>
                    <p>Mari jons</p>
                </div>
                <div class="progress-Bar">
                    <div class="bar wow rollIn">
                        <h4>Photoshop</h4>
                        <div class="bar-box ">
                            <div class="progress-box ">
                                <span>90%</span>
                            </div>
                        </div>
                    </div>
                    <div class="bar wow rollIn" data-wow-delay=".2s" data-wow-iteration:"1">
                        <h4>Final Cut</h4>
                        <div class="bar-box">
                            <div class="progress-box progress-box-1">
                                <span>75%</span>
                            </div>
                        </div>
                    </div>
                    <div class="bar wow rollIn" data-wow-delay=".4s" data-wow-iteration:"1">
                        <h4>Studio Photography</h4>
                        <div class="bar-box">
                            <div class="progress-box progress-box-2">
                                <span>80%</span>
                            </div>
                        </div>
                    </div>
                    <div class="bar wow rollIn" data-wow-delay=".6s" data-wow-iteration:"1">
                        <h4>Motion Video</h4>
                        <div class="bar-box">
                            <div class="progress-box progress-box-3">
                                <span>60%</span>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- 日期 -->
    <div class="day">
        <ul class="wow flipInX" data-wow-iteration:"1">
            <li>
                <span>196</span>
                <p>Creative work</p>
            </li>
            <li><span>194</span>
                <p>Satisfied Clients</p>
            </li>
            <li><span>165</span>
                <p>Working Days</p>
            </li>
            <li><span>99</span>
                <p>Cup of Coffe</p>
            </li>
        </ul>
    </div>

    <!-- 图片墙 -->
    <div class="picwall">
        <div class="font wow rollIn" data-wow-iteration:"1">
            <h6>Services</h6>
            <h2>MY SPECIALTIES</h2>
        </div>
        <div class="picbox">
            <div class="box wow bounceInLeft" data-wow-iteration:"1">
                <figure><img src="./picture/service-1.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Commercial Photography</a></div>
            </div>
            <div class="box wow bounceInDown" data-wow-iteration:"1">
                <figure><img src="./picture/service-2.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Fashion Photography</a></div>
            </div>
            <div class="box wow bounceInRight" data-wow-iteration:"1">
                <figure><img src="./picture/service-3.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Wedding & portrait Photography</a></div>
            </div>
            <div class="box wow bounceInLeft" data-wow-iteration:"1">
                <figure><img src="./picture/service-4.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Celebrity Photography</a></div>
            </div>
            <div class="box wow bounceInUp" data-wow-iteration:"1">
                <figure><img src="./picture/service-5.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Underwater Photography</a></div>
            </div>
            <div class="box wow bounceInRight" data-wow-iteration:"1">
                <figure><img src="./picture/service-6.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Wildlife Photography</a></div>
            </div>
        </div>
    </div>

    <!-- 底栏 -->
    <div class="bottom">
        <div class="follow">
            <h1>Fellow me</h1>
            <form action="#">
                <div class="email">
                    <input type="text" placeholder="Enter your email">
                    <button>Subscribe</button>
                </div>

            </form>
        </div>
        <div class="last">
            <div class="left">
                <figure>
                    <a href="#">
                        <img src="./picture/footer-logo.png" alt=""></a>
                </figure>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./logo/facebook.png" alt="" style="width: 60%;">
                        </a>
                    </li>
                    <li><a href="#">
                            <img src="./logo/twitter.png" alt="" style="width: 75%;">
                        </a></li>
                    <li><a href="#">
                            <img src="./logo/instagram.png" alt="" style="width: 75%;">
                        </a></li>
                    <li><a href="#">
                            <img src="./logo/ipr_消息.png" alt="" style="margin: 0%;">
                        </a></li>
                </ul>
                <div class="right-right">
                    <span>© 2019. All rights reserved by</span>
                    <a href="#">17sucai</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/less.min.js"></script>
<script src="./js/wow.min.repeat.js"></script>
<script>
    new WOW().init();
</script>
